import styled from 'styled-components'

import sprite02 from '@/assets/img/sprite_02.png'
import spriteCover from '@/assets/img/sprite_cover.png'

export const AblumItemWrapper = styled.div`
  width: 118px;
  height: 150px;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 118px;
    height: 150px;
    display: block;
    background-image: url(${sprite02});
    background-repeat: no-repeat;
    background-position: -260px 100px;
    z-index: 103;
  }

  .top {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: #fff;

    .img {
      width: 100%;
      height: 100%;
    }
    .cover_img {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 118px;
      height: 100px;
      background: url(${spriteCover}) no-repeat;
      background-position: 0 -570px;
      z-index: 100;
    }
  }

  .bottom {
    position: absolute;
    z-index: 200;
    margin-top: 10px;
    width: 100px;
    left: 0;
    right: 0;
    .name1,
    .name2 {
      line-height: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-wrap: normal;
      line-clamp: 1;
      font-size: 12px;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }
    .name1,
    .name1 > a {
      color: #000;
    }
    .name2,
    .name2 > a {
      color: #666;
    }
  }
`
